import { FC } from "react"
import styles from "./TabDiscussion.less"
import { Avatar } from "antd"
import { UserOutlined } from "@ant-design/icons"

interface Idiscussion {
  id: number,
  type: number,
  userImgUrl: string,
  desc: string
}

interface ItemPro {
  item: Idiscussion
}

interface IchattingRecordsList {
  id: number,
  title: string,
  list: Array<Idiscussion>
}

interface ChattingRecordsPro {
  chattingRecordsList: Array<IchattingRecordsList>
}

const discussionLogList: Array<Idiscussion> = [
  {
    id: 0,
    type: 0,
    userImgUrl: "",
    desc: "看看有没有这样结构的，查看报告的页面。（我这个是写报告的）"
  },
  {
    id: 1,
    type: 0,
    userImgUrl: "",
    desc: "患者列表页中，增加筛选条件，建档医院（我院、他院）、当前 所在（我院、他院）。UI出图。"
  },
  {
    id: 2,
    type: 1,
    userImgUrl: "",
    desc: "医生护士APP的需求"
  },
  {
    id: 2,
    type: 1,
    userImgUrl: "",
    desc: "原型后面不要加后缀啊，变成链接一部分了"
  }
]

const chattingRecordsList: Array<IchattingRecordsList> = [
  {
    id: 0,
    title: "2021.04.23 8:36",
    list: discussionLogList
  },
  {
    id: 1,
    title: "昨天 10:36",
    list: discussionLogList
  },
  {
    id: 1,
    title: "今天 10:36",
    list: discussionLogList
  }
]

const ChattingRecords = (props: ChattingRecordsPro) => {
  const { chattingRecordsList } = props
  return (
    <div>
      {
        chattingRecordsList.map((newItem: IchattingRecordsList, newIndex: number) => {
          return (
            <div key={newIndex}>
              <div className={styles.discussionTime}>{newItem.title}</div>
              <div className={styles.discussionList} key={newIndex}>
                {
                  newItem.list.map((item, index) => {
                    return item.type == 0 ? <ItemLeft key={index} item={item} /> : <ItemRight key={index} item={item} />
                  })
                }
              </div>
            </div>
          )
        })
      }
    </div>
  )
}

/**
 * 左侧聊天样式
 */

const ItemLeft = (props: ItemPro) => {
  const { item } = props
  return (
    <div className={styles.discussionItemLeft}>
      <figure className={styles.userIconBox}>
        {
          item.userImgUrl && item.userImgUrl != ""
            ? <img className={styles.userIcon} src={item.userImgUrl} alt="" />
            : <Avatar style={{ background: "#1890FF" }} icon={<UserOutlined />} />
        }
      </figure>
      <div className={styles.userDesc}>{item.desc}</div>
    </div>
  )
}

/**
 * 右侧聊天样式
 */
const ItemRight = (props: ItemPro) => {
  const { item } = props
  return (
    <div className={styles.discussionItemRight}>
      <div className={styles.flex1} />
      <div className={styles.userDesc}>{item.desc}</div>
      <figure className={styles.userIconBoxLeft}>
        {
          item.userImgUrl && item.userImgUrl != ""
            ? <img className={styles.userIcon} src={item.userImgUrl} alt="" />
            : <Avatar style={{ background: "#1890FF" }} icon={<UserOutlined />} />
        }
      </figure>
    </div>
  )
}



const tabDiscussion: FC = () => {
  return (
    <div className={styles.tabDiscussionBox}>
      {/* <div className={styles.discussionTime}>今天 10:36</div> */}
      <ChattingRecords chattingRecordsList={chattingRecordsList} />
    </div>
  )
}

export default tabDiscussion